<template>
  <div class="navbar">
    <div class="left-section">
      <div class="logo">
        <img src="../../../assets/images/logof.jpg" class="logo-img" />
      </div>
    </div>
    <div class="right-section">
      <div class="user-icon">
        <a href="#">
          <img src="../../../assets/images/ggb.png" class="user-icon-logo" />
        </a>
        <!-- 下拉菜单 -->
        <ul class="dropdown-menu">
          <li>
            <!-- 使用 router-link 实现路由跳转 -->
            <router-link to="#" class="dropdown-item">可视化大屏</router-link>
          </li>
          <li class="logout-item">联系我们</li>
          <li class="logout-item" @click="logout">退出登录</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RotatingPositionComponent",
  methods: {
    logout() {
      localStorage.removeItem("isLoggedIn");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  border: .5px solid #ccc;
  background-color: #ffffff;
  /* border-radius: 10px; */
}

.left-section {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 60px;
  height: 60px;
  background-size: contain;
}

.right-section {
  display: flex;
  align-items: center;
}

.user-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.user-icon-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.dropdown-menu {
  position: absolute;
  top: 50px;
  right: -15px;
  display: none;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  list-style: none;
  z-index: 1000;
  width: 120px;
}

.user-icon:hover .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
  cursor: pointer;
  text-align: center;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

.logout-item {
  padding: 10px;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.logout-item:hover {
  background-color: #f0f0f0;
}

.logout-item:last-child {
  border-bottom: none;
}
</style>
